<template>
	<div class="indexlayout-main-conent">
		<el-card shadow="never" class="cus-card">
			<el-row>
				<el-col :span="4">人员列表</el-col>
				<el-col :span="5">
					<site-server :onchange="changeSite"></site-server>
				</el-col>
				<el-col :span="6">
					<el-button type="primary" @click="AddUser" >添加</el-button>
				</el-col>
			</el-row>
			<el-row>
				<el-col>
					<el-table :data="list" style="width: 100%; margin-bottom: 20px" row-key="id" border
						default-expand-all>
						<el-table-column prop="Id" label="id" sortable />
						<el-table-column prop="UserName" label="用户名" sortable />
						<el-table-column prop="RealName" label="姓名" sortable />
						<el-table-column prop="Mobile" label="手机号码" />
						<el-table-column prop="Email" label="邮箱" />
						<el-table-column prop="Adddate" label="注册时间" sortable />
						<el-table-column prop="mem" label="备注"></el-table-column>
						<el-table-column label="操作" prop="action" width="160">
							<template #default="{row}">
								<el-button type="text" @click="() => permission(row)">角色权限</el-button>
								<el-button type="text" @click="() => detailUpdateData(row)">编辑</el-button>
								<el-button type="text" @click="() => deleteTableData(row.Id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>

				</el-col>
			</el-row>
			<el-row>
				<el-col>
					<el-pagination layout="prev, pager, next" :total="total" />
				</el-col>
			</el-row>
		</el-card>
		<EditWindow :visible="isShowEditWindow" :onCancel="() => isShowEditWindow=false" :onSubmit="EditWindowSubmit"
			:data="selectRow"></EditWindow>
		<AddWindow :visible="isShowAddWindow" :onCancel="() => isShowAddWindow=false" :onSubmit="AddWindowSubmit">
		</AddWindow>
		<RoleWindow :visible="isShowRoleWindow" :onCancel="() => isShowRoleWindow=false" :onSubmit="RoleWindowSubmit"
			:data="selectRow"></RoleWindow>
	</div>
</template>

<script setup lang="ts">
	import EditWindow from './components/EditWindow.vue'
	import AddWindow from './components/AddWindow.vue'
	import RoleWindow from './components/RoleWindow.vue'
	import { queryList, AdminuserDelete } from './service'
	import { TableListItem, TableListQueryParams } from './data.d'
	import { useUserStore } from '@/store/user';

	import { ref, computed, onMounted } from 'vue'
	import { ElMessageBox } from "element-plus";

	const list = ref<Array<TableListItem>>([])
	const pageSize = 10;
	const pageIndex = 1;
	const user = useUserStore();
	const selectSite = ref(user.$state.user.site);

	const total = ref(0);
	const getList = async () => {
		let params : TableListQueryParams = {
			PageIndex: pageIndex,
			PageSize: pageSize,
			site: selectSite.value
		}
		let res = await queryList(params)
		const { Count, Data } = res
		total.value = Count
		list.value = Data
	}
	const changeSite = (site) => {
		selectSite.value = site
		getList()
	}
	const isShowRoleWindow = ref(false)
	const permission = (row) => {
		selectRow.value = row
		isShowRoleWindow.value = true
	}
	const RoleWindowSubmit = () => {
		isShowRoleWindow.value = false
	}
	const selectRow = ref(null)
	const isShowEditWindow = ref(false)

	const detailUpdateData = (row) => {
		selectRow.value = row
		isShowEditWindow.value = true
	}
	const EditWindowSubmit = (data) => {
		isShowEditWindow.value = false
		getList()
	}
	const deleteTableData = (id) => {
		ElMessageBox.confirm('确定删除吗？', '删除', {
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
		}).then(async () => {
			let params = {
				id: id
			}
			AdminuserDelete(params).then(res => {
				getList()
			})
		})
	}
	const isShowAddWindow = ref(false)
	const AddWindowSubmit = () => {
		isShowAddWindow.value = false
		getList()
	}
	const AddUser = () => {
		isShowAddWindow.value = true
	}
	onMounted(() => {
		getList()
	})
</script>

<style>
</style>